<template>
  <el-dialog
    v-model="dialogVisible"
    title="登录"
    width="32rem"
    :before-close="handleClose"
    :align-center="true"
    class="rd-lg"
  >
    <div class="rd-lg">
      <el-form label-width="auto" :model="loginForm">
        <el-form-item label="账号">
          <el-input v-model="loginForm.email" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="loginForm.password" type="password" show-password />
        </el-form-item>
      </el-form>
      <div class="text-center">
        <el-button type="primary" @click="handleLogin">登录</el-button>
        <el-button type="default" @click="handleCancel">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { login } from "@/modules/user";

import { useAppStore } from "@/store/modules/app";
const appStore = useAppStore();

const dialogVisible = ref(true);

const loginForm = reactive({
  email: "",
  password: ""
});

const close = () => {
  dialogVisible.value = false;
  appStore.setCurrentDynamicComponent(null);
};

const handleCancel = () => {
  loginForm.email = "";
  loginForm.password = "";
  close();
};

const handleLogin = async () => {
  login({
    email: loginForm.email,
    password: loginForm.password
  });
  close();
};

const handleClose = (done: () => void) => {
  close();
  done();
};
</script>

<style scoped>
.screen-map {
  position: fixed;
  inset: 0;
}

.el-dialog {
  /* border: 2px solid var(--accent-100t); */
  border-radius: 0.5rem;
}
</style>
